<template>
    <el-dialog v-model="dialogVisible" title="编辑专家信息" width="700px">
        <el-form :model="editForm" label-width="120px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="姓名">
                        <el-input v-model="editForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号">
                        <el-input v-model="editForm.idCardNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="职称">
                        <el-input v-model="editForm.title"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最高学历">
                        <el-input v-model="editForm.education"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所学专业">
                        <el-select v-model="editForm.majorStudied" placeholder="请选择所学专业" value-key="id">
                            <el-option v-for="major in professionList" :key="major.id" :label="major.name"
                                :value="major"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="目前从事专业">
                        <el-select v-model="editForm.currentProfession" placeholder="请选择目前从事专业" value-key="id">
                            <el-option v-for="profession in professionList" :key="profession.id"
                                :label="profession.name" :value="profession"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="出生年月">
                        <el-date-picker v-model="editForm.birthDate"type="date" value-format="yyyy-MM" ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位名称">
                        <el-input v-model="editForm.companyName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="职务">
                        <el-input v-model="editForm.position"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位地址">
                        <el-input v-model="editForm.companyAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="联系电话">
                        <el-input v-model="editForm.phoneNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="邮政编码">
                        <el-input v-model="editForm.postalCode"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="手机">
                        <el-input v-model="editForm.mobile"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电子邮箱">
                        <el-input v-model="editForm.email"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveExpert">保存</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import { getAllProfessions, updateExpert } from '@/alova/api';
import { ElLoading } from 'element-plus';
import { defineEmits, ref } from 'vue';

const dialogVisible = ref(false);
const editForm = ref({});
const emit = defineEmits(['expertModified']);
const loading = ref(false);
const professionList = ref([]);

const openDialog = (expert) => {
    getProfessions();
    editForm.value = { ...expert };
    dialogVisible.value = true;
};

const getProfessions = async()=>{
    loading.value = true; // 开始加载
    const loader = ElLoading.service({
        fullscreen: true,
        text: "数据加载中...",
    });
    getAllProfessions().then(data => {
        loading.value = false;
        professionList.value = data;
    }).catch(error => {
        console.error("查询失败:", error);
    }).finally(() => {
        loading.value = false; // 结束加载
        loader.close(); // 关闭加载动画
    }); 
};

const saveExpert = async () => {
    console.log('保存专家信息:', editForm.value);
    dialogVisible.value = false;
    try {
    await updateExpert(editForm.value);
    dialogVisible.value = false;
    emit('expertModified'); // 通知父组件刷新数据
  } catch (error) {
    console.error('修改失败', error);
  }
};
defineExpose({ openDialog });
</script>